<template>
	<view>
		<u-swiper :list="banner" @click="openBanner" keyName="image" height="400rpx"></u-swiper>
		<view class="tab">
			<view class="item" :class="{'active':curTabId==item.id}" v-for="item in tabList" :key="item.id"
				@click="selectTab(item.id)">
				{{item.name}}
			</view>
		</view>
		<view class="content">
			<!-- 门票 -->
			<n-menpiao ref="menpiao" v-show="curTabId==1" @updateCart="getCertLists"></n-menpiao>
			<!-- 营地 -->
			<n-yingdi v-show="curTabId==2"></n-yingdi>
			<!-- 无忧 -->
			<n-wuyou v-show="curTabId==3"></n-wuyou>
		</view>

		<!-- 购物车 -->
		<view class="cart">
			<view class="price">
				总计￥ <text>{{totalPrice}}</text>
			</view>
			<view class="btn-1" @click="openCart">
				购物车
				<u-icon color="#111" name="arrow-up" v-if="cartShow"></u-icon>
				<u-icon color="#111" name="arrow-down" v-else></u-icon>
			</view>
			<view class="btn" :class="{active:certLists.length>0}" @click="goOrder">
				去支付
			</view>
		</view>

		<!-- 购物车详情 -->
		<view class="cart-info" v-if="cartShow">
			<view class="header">
				<view class="title">购物车</view>
				<view class="desc" v-if="certLists[0].start_time">入离园日期:{{certLists[0].start_time}}至{{certLists[0].end_time}}
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="item in certLists" :key="item.id">
					<view v-if="item.type==1">{{item.service_name}}</view>
					<view v-else>{{item.weigh}}号营地</view>
					<view class="money flex-1">￥{{item.price}}</view>
					<view class="num" v-if="item.type==2 || item.type==3">{{item.num}}天</view>
					<view class="num" v-else>{{item.num}}张</view>
					<view class="price" @click="delCart(item)">删除</view>
				</view>
			</view>
		</view>
		<u-modal :show="modalShow" :title="title" confirm-text="我已阅读" @confirm="modalShow = false">
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner: [{
					img: require('@/static/banner.png')
				}],
				tabList: [{
						id: 1,
						name: '门票',
					},
					{
						id: 2,
						name: '林中露营地',
					},
					{
						id: 3,
						name: '林景吊脚楼',
					}
				],
				curTabId: 1,
				cartShow: false,
				certLists: [],
				totalPrice: 0,
				userInfo: '',
				modalShow: false,
				content: '',
				title: '',
			};
		},
		onLoad() {
			this.getBanner()

		},
		onShow() {
			this.getCertLists()
			this.userInfo = uni.getStorageSync('userInfo')
			let token = uni.getStorageSync('token')
			if (token) {
				this.openModal1('ruyuanxuzhi', '入园须知')
			}
		},
		watch: {
			certLists: {
				handler(e) {
					if (e.length > 0) {
						let totalPrice = 0
						e.forEach(item => {
							totalPrice += Number(item.price) * Number(item.num)
						})
						this.totalPrice = totalPrice.toFixed(2)
					}
				},
				immediate: true,
				deep: true,
			}
		},
		methods: {
			openModal(name, title) {
				this.$api.getConfig({
					name
				}).then(res => {
					if (res.code == 1) {
						this.content = res.data
						this.title = title
						this.modalShow = true
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			openModal1(name, title) {
				let ifShow = uni.getStorageSync('isShowruyuanxuzhi')
				console.log(ifShow)
				this.$api.getConfig({
					name
				}).then(res => {
					if (res.code == 1) {
						this.content = res.data
						this.title = title
						if (!ifShow) {
							this.modalShow = true
							uni.setStorageSync('isShowruyuanxuzhi', 1)
						}
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			openBanner(e) {
				console.log(e)
				let banner = []
				this.banner.forEach(item => {
					banner.push(item.image)
				})
				this.$tools.previewImg(banner, e)
			},
			
			goOrder() {
				if (this.certLists.length != 0) {
					let isBuy = this.certLists.some(item => {
						return item.is_buy == 1
					})
					if (isBuy) {
						let isHaveMempiao = this.certLists.some(item => {
							return item.type == 1
						})
						if (isHaveMempiao) {
							uni.navigateTo({
								url: '/pages/createOrder/createOrder'
							})
						} else {
							uni.showModal({
								title: '温馨提示',
								content: '营位票不包含门票，门票需单独购买，是否购买门票',
								showCancel: true,
								cancelText: '购买门票',
								confirmText: '继续支付',
								success: (res) => {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/createOrder/createOrder'
										})
									} else {
										this.curTabId = 1
									}
								}
							})
						}
						// this.certLists.forEach(item => {
						// 	if (item.type == 2 || item.type == 3) {
						// 		if (item.is_buy == 1) {
						// 			let isHaveMenpiao = this.certLists.some(item => {
						// 				return item.type == 1
						// 			})
						// 			if (!isHaveMenpiao) {
						// 				uni.showModal({
						// 					title: '温馨提示',
						// 					content: '营位票不包含门票，门票需单独购买，是否购买门票',
						// 					showCancel:true,
						// 					cancelText:'购买门票',
						// 					confirmText:'继续支付',
						// 					success:(res)=>{
						// 						if(res.confirm){
						// 							uni.navigateTo({
						// 								url: '/pages/createOrder/createOrder'
						// 							})
						// 						}else{
						// 							this.curTabId = 1
						// 						}
						// 					}
						// 				})
						// 			}
						// 		}
						// 	}
						// })
					} else {
						uni.navigateTo({
							url: '/pages/createOrder/createOrder'
						})
					}
				} else {
					this.$tools.toast('请先选择商品')
				}
			},
			openCart() {
				if (this.certLists.length > 0) {
					this.cartShow = !this.cartShow
				} else {
					this.$tools.toast('请先选择商品')
				}
			},
			getCertLists() {
				this.$api.certLists().then(res => {
					if (res.code == 1) {
						if (res.data.length == 0) {
							this.cartShow = false
							this.totalPrice = 0
						}
						this.certLists = res.data
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			getBanner() {
				this.$api.getBanner().then(res => {
					if (res.code == 1) {
						this.banner = res.data
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			selectTab(curTabId) {
				this.cartShow = false
				this.curTabId = curTabId
			},
			delCart(item) {
				this.$api.delCert({
					cert_ids: item.id
				}).then(res => {
					if (res.code == 1) {
						this.getCertLists()
						this.$refs.menpiao.updateMenpiaoNum(item.service_id)
					} else {
						this.$tools.toast(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.slot-content {
		max-height: 70vh;
		overflow-y: scroll;
	}

	.tab {
		@include menu-list(3) .item {
			background: #dfdede;
			color: #333;
			text-align: center;
			margin: 16upx 20upx;
			line-height: 70upx;
			font-size: 28upx;
		}

		.item.active {
			color: #fff;
			background: #647b4c;
		}
	}

	.content {
		padding-bottom: 120upx;
	}

	.cart {
		height: 100upx;
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		/* #ifdef H5 */
		bottom: 100upx;
		/* #endif */
		background: #fff;
		@include flex-between;
		padding: 0 30upx;
		box-shadow: 0 -2upx 12upx 0 rgba(0, 0, 0, .05);

		.price {
			font-size: 26upx;
			color: #d56a5e;
			flex: 1;

			text {
				font-size: 36upx;
				font-weight: 600;
			}
		}

		.btn-1 {
			font-size: 28upx;
			color: #111;
			@include flex;
			margin-right: 10upx;
		}

		.btn {
			background: #8f8f8f;
			color: #fff;
			font-weight: 600;
			text-align: center;
			width: 180upx;
			line-height: 80upx;
			border-radius: 36upx;
			background: #8f8f8f;
		}

		.btn.active {
			background-image: linear-gradient(90deg, #e3984a, #d5673a);
		}
	}

	

	.cart-info {
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 100upx;
		right: 0;
		/* #ifdef H5 */
		bottom: 200upx;
		/* #endif */
		padding: 30upx 30upx 0;
		font-size: 30upx;

		.header {
			border-bottom: 1px solid #eee;
			padding-bottom: 20upx;

			.title {
				font-weight: 600;
				font-size: 30upx;
			}

			.desc {
				font-weight: 600;
				font-size: 24upx;
				margin-top: 20upx;
			}
		}

		.list {
			.item {
				@include flex-between;
				padding: 20upx 0;
				border-bottom: 1px solid #eee;

				.money {
					text-align: right;
				}

				.num {
					width: 100upx;
					text-align: right;
					margin-right: 50upx;
				}
			}
		}
	}
</style>